<nav class="navbar navbar-dark navbar-expand-md bg-dark">
    <a (click)="collapseNavbar()" class="navbar-brand logo" routerLink="/">
        <span class="logo-img"></span>
        <span class="navbar-title" jhiTranslate="global.title">JhipsterSampleApplication</span> <span
            class="navbar-version">{{ version }}</span>
    </a>
    <a (click)="toggleNavbar()" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"
       class="navbar-toggler d-lg-none" data-target="#navbarResponsive" data-toggle="collapse"
       href="javascript:void(0);">
        <fa-icon icon="bars"></fa-icon>
    </a>
    <div [ngSwitch]="isAuthenticated()" [ngbCollapse]="isNavbarCollapsed" class="navbar-collapse collapse"
         id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
            <li [routerLinkActiveOptions]="{ exact: true }" class="nav-item" routerLinkActive="active">
                <a (click)="collapseNavbar()" class="nav-link" routerLink="/">
                    <span>
                        <fa-icon icon="home"></fa-icon>
                        <span jhiTranslate="global.menu.home">Home</span>
                    </span>
                </a>
            </li>
            <!-- jhipster-needle-add-element-to-menu - JHipster will add new menu items here -->
            <li *ngSwitchCase="true" [routerLinkActiveOptions]="{ exact: true }" class="nav-item dropdown pointer"
                display="dynamic" ngbDropdown routerLinkActive="active">
                <a class="nav-link dropdown-toggle" href="javascript:void(0);" id="entity-menu" ngbDropdownToggle>
                    <span>
                        <fa-icon icon="th-list"></fa-icon>
                        <span jhiTranslate="global.menu.entities.main">
                            Entities
                        </span>
                    </span>
                </a>
                <ul aria-labelledby="entity-menu" class="dropdown-menu" ngbDropdownMenu>
                    <li>
                        <a (click)="collapseNavbar()" [routerLinkActiveOptions]="{ exact: true }" class="dropdown-item"
                           routerLink="bank-account" routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="asterisk"></fa-icon>
                            <span jhiTranslate="global.menu.entities.bankAccount">Bank Account</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" [routerLinkActiveOptions]="{ exact: true }" class="dropdown-item"
                           routerLink="label" routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="asterisk"></fa-icon>
                            <span jhiTranslate="global.menu.entities.label">Label</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" [routerLinkActiveOptions]="{ exact: true }" class="dropdown-item"
                           routerLink="operation" routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="asterisk"></fa-icon>
                            <span jhiTranslate="global.menu.entities.operation">Operation</span>
                        </a>
                    </li>
                    <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
                </ul>
            </li>
            <li *jhiHasAnyAuthority="'ROLE_ADMIN'" [routerLinkActiveOptions]="{ exact: true }"
                class="nav-item dropdown pointer" display="dynamic" ngbDropdown routerLinkActive="active">
                <a class="nav-link dropdown-toggle" href="javascript:void(0);" id="admin-menu" ngbDropdownToggle>
                    <span>
                        <fa-icon icon="user-plus"></fa-icon>
                        <span jhiTranslate="global.menu.admin.main">Administration</span>
                    </span>
                </a>
                <ul aria-labelledby="admin-menu" class="dropdown-menu" ngbDropdownMenu>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/user-management"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="user"></fa-icon>
                            <span jhiTranslate="global.menu.admin.userManagement">User management</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/metrics"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="tachometer-alt"></fa-icon>
                            <span jhiTranslate="global.menu.admin.metrics">Metrics</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/health"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="heart"></fa-icon>
                            <span jhiTranslate="global.menu.admin.health">Health</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/configuration"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="list"></fa-icon>
                            <span jhiTranslate="global.menu.admin.configuration">Configuration</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/audits"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="bell"></fa-icon>
                            <span jhiTranslate="global.menu.admin.audits">Audits</span>
                        </a>
                    </li>
                    <li>
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/logs"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="tasks"></fa-icon>
                            <span jhiTranslate="global.menu.admin.logs">Logs</span>
                        </a>
                    </li>
                    <li *ngIf="swaggerEnabled">
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="admin/docs"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="book"></fa-icon>
                            <span jhiTranslate="global.menu.admin.apidocs">API</span>
                        </a>
                    </li>
                    <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
                    <li *ngIf="!inProduction">
                        <a (click)="collapseNavbar()" class="dropdown-item" href='./h2-console' target="_tab">
                            <fa-icon [fixedWidth]="true" icon="hdd"></fa-icon>
                            <span jhiTranslate="global.menu.admin.database">Database</span>
                        </a>
                    </li>
                </ul>
            </li>
            <li *ngIf="languages && languages.length > 1" class="nav-item dropdown pointer" display="dynamic"
                ngbDropdown>
                <a class="nav-link dropdown-toggle" href="javascript:void(0);" id="languagesnavBarDropdown"
                   ngbDropdownToggle>
                    <span>
                        <fa-icon icon="flag"></fa-icon>
                        <span jhiTranslate="global.menu.language">Language</span>
                    </span>
                </a>
                <ul aria-labelledby="languagesnavBarDropdown" class="dropdown-menu" ngbDropdownMenu>
                    <li *ngFor="let language of languages">
                        <a (click)="changeLanguage(language);collapseNavbar();" [jhiActiveMenu]="language"
                           class="dropdown-item" href="javascript:void(0);">{{ language | findLanguageFromKey }}</a>
                    </li>
                </ul>
            </li>
            <li [routerLinkActiveOptions]="{ exact: true }" class="nav-item dropdown pointer" display="dynamic"
                ngbDropdown routerLinkActive="active">
                <a class="nav-link dropdown-toggle" href="javascript:void(0);" id="account-menu" ngbDropdownToggle>
                    <span *ngIf="!getImageUrl()">
                        <fa-icon icon="user"></fa-icon>
                        <span jhiTranslate="global.menu.account.main">
                            Account
                        </span>
                    </span>
                    <span *ngIf="getImageUrl()">
                        <img [src]="getImageUrl()" alt="Avatar" class="profile-image rounded-circle">
                    </span>
                </a>
                <ul aria-labelledby="account-menu" class="dropdown-menu" ngbDropdownMenu>
                    <li *ngSwitchCase="true">
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="account/settings"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="wrench"></fa-icon>
                            <span jhiTranslate="global.menu.account.settings">Settings</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="true">
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="account/password"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="lock"></fa-icon>
                            <span jhiTranslate="global.menu.account.password">Password</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="true">
                        <a (click)="logout()" class="dropdown-item" id="logout">
                            <fa-icon [fixedWidth]="true" icon="sign-out-alt"></fa-icon>
                            <span jhiTranslate="global.menu.account.logout">Sign out</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="false">
                        <a (click)="login()" class="dropdown-item" id="login">
                            <fa-icon [fixedWidth]="true" icon="sign-in-alt"></fa-icon>
                            <span jhiTranslate="global.menu.account.login">Sign in</span>
                        </a>
                    </li>
                    <li *ngSwitchCase="false">
                        <a (click)="collapseNavbar()" class="dropdown-item" routerLink="account/register"
                           routerLinkActive="active">
                            <fa-icon [fixedWidth]="true" icon="user-plus"></fa-icon>
                            <span jhiTranslate="global.menu.account.register">Register</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
